<template>
  <div id="detail">
    <div id="head">
      <p><strong class="EName">{{en_name}}</strong></p>
      <p class="ZName">{{cn_name}}</p>
    </div>
    <div id="context">
      {{context}}
    </div>
  </div>
</template>

<script>

  export default {
    name: "detail",
    props:['en_name','cn_name','context'],
    data(){
      return {
        en_name:this.en_name,
        cn_name:this.cn_name,
        context:this.context
      }
    }

  }
</script>

<style scoped>
  #detail{
    float: right;
    width:80%;
    text-align: center;
    margin: 0 auto;
    height: 150px;
    /*padding-bottom: 10px;*/
    /*padding-top: 0;*/
    /*background-color: #646464;*/
  }
  #head{
    text-align: center;
    margin: 0 auto;
    color:red;
    border-bottom:1px dashed gainsboro;
  }
  .EName{
    padding-right: 80%;
    font-size: 30px;
  }
  .ZName{
    padding-right: 80%;

  }
  #context{
    /*height: 600px;*/
  }
</style>
